<template>
  <div class="commenPage">
    <div class="commenPage-top" v-if="button.show">
      <el-button type="primary" @click="button.click" round>{{
        button.name
      }}</el-button>
    </div>
    <div class="commenPage-topList" v-if="button.topElement">
      <div
        class="commenPage-topList-template"
        v-for="(ele, i) in button.topElement"
        :key="i"
      >
        <el-button v-if="ele.type == 'button'" round>{{ ele.name }}</el-button>
        <el-date-picker
          v-model="ele.value"
          type="datetimerange"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          :default-time="['12:00:00']"
          v-if="ele.type == 'data'"
        >
        </el-date-picker>
        <el-input
          :placeholder="'请输入' + ele.name"
          v-if="ele.type == 'search'"
        >
          <i slot="prefix" class="el-input__icon el-icon-search"></i
        ></el-input>
      </div>
    </div>
    <div class="commenPage-table">
      <CostomTable
        :operatWidth="operatWidth"
        :operating="operating"
        :tableData="tableData"
        :nameData="nameData"
        :sort="sort"
        :pagination="pagination"
        :currentChange="currentChange"
      />
    </div>

    <el-dialog :visible.sync="button.dialogVisible" width="30%">
      <div class="myDialog">
        <p class="myDialog-title">{{ button.myDialogTitle }}</p>
        <div class="myDialog-info">
          <div
            class="myDialog-info-template"
            v-for="(ele, i) in button.myDialog"
            :key="i"
          >
            <p class="myDialog-info-template-first">{{ ele.title }}</p>
            <el-input
              v-if="ele.type == 'input'"
              v-model="ele.value"
              :placeholder="'请输入' + ele.title"
            ></el-input>
            <el-date-picker
              v-if="ele.type == 'date'"
              value-format="yyyy年MM月dd日"
              v-model="ele.value"
              type="date"
              :placeholder="'请选择' + ele.title"
            ></el-date-picker>
            <el-select v-if="ele.type == 'select' "
                v-model="ele.value"
               :placeholder="'请选择' + ele.title"
               
              >
                <el-option
                  v-for="item in ele.valueData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            <div v-if="ele.type == 'radio'">
              <el-radio
                v-for="(_ele, _i) in ele.valueData"
                :key="_i"
                v-model="ele.value"
                :label="_ele"
                >{{ _ele }}</el-radio
              >
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="button.dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="button.confirm">确 定</el-button>
        </span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import CostomTable from "@/components/costomTable.vue"
export default {
  data() {
    return {};
  },
  components: {
    CostomTable,
  },
  props: {
    tableData: Array,
    nameData: Array,
    button: Object,
    sort: Boolean,
    operating: Array,
    operatWidth: String,
    pagination:Number,
    currentChange:Function
  },
  methods: {
    changeTime() {},
  },
};
</script>

<style lang='scss' scoped>
.commenPage {
  .myDialog {
    .dialog-footer {
      .el-button {
        margin-right: 0.2rem;
      }
      margin-top: 0.2rem;
      display: flex;
      flex-direction: row-reverse;
    }
    &-info-template {
      div {
        display: flex;
        width: 80%;
      }
      &-first {
        width: 40%;
        text-align: left;
      }
      display: flex;
      justify-content: space-between;
      white-space: nowrap;
      align-items: center;
      padding: 0 0.2rem;
      background: #f5f5f5;
      margin-top: 0.2rem;
    }
    &-title {
      background: #006ab4;
      color: #fff;
      text-align: left;
      padding: 0.1rem 0.2rem;
    }
    background: #f4f4f4;
    padding-bottom: 0.2rem;
    &-info {
      max-height: 60vh;
      overflow-y: scroll;
    }
  }
  .commenPage-table {
    padding: 0.1rem;
    height: 80vh;
    overflow-y: scroll;
  }
  &-topList {
    &-template {
      margin-right: 0.2rem;
    }
    .el-button {
      background: #006ab4;
      color: #fff;
    }
    display: flex;
    padding: 0.2rem;
  }
  &-top {
    .el-button {
      margin-right: 0.1rem;
    }
    display: flex;
    padding: 0.1rem;
  }
  background: #fff;
  margin: 0.1rem;
}
</style>

<style lang="scss">
.commenPage {
  &-topList {
    .el-input {
      input {
        background: #ececec;
        border-radius: 0.2rem;
        &::placeholder {
          color: #666;
        }
      }
    }
  }

  .el-dialog__header {
    display: none !important;
  }
  .el-dialog__body {
    padding: 0;
  }
}
</style>